/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <TypePopup ref="typePopup" :data="typeData" v-model="type"></TypePopup>
    <Header title="套餐列表">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
      <!-- <div slot="right" @click="showTypePopup" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-guolv" style="font-size: 20px"></i>
      </div>-->
    </Header>
    <div class="main">
      <mescroll-vue
        class="mescroll_content"
        ref="mescroll"
        :down="mescrollDown"
        @init="mescrollInit"
      >
        <ul>
          <li v-for="(item,index) in list" :key="index" @click="goDetail(item.id)">
            <h2>{{item.sname}}-{{item.name}}</h2>
            <p class="sub_title">{{item.sname}} | {{item.chapters}}次课</p>
            <p class="type_box">
              <b v-for="(j,k) in item.labels" :key="k" style="margin-right: 10px;">{{j}}</b>
            </p>
            <div class="footer">
              <div class="left">
                <div class="teacher" v-for="(t, g) in item.teachers" :key="g">
                  <img :src="t.portrait" :alt="t.name">
                  <p>{{t.name}}</p>
                </div>
              </div>
              <div class="right">
                <p class="price">¥{{item.price}}</p>
                <p class="person">{{item.orders}}人购买</p>
              </div>
            </div>
          </li>
        </ul>
      </mescroll-vue>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import MescrollVue from "mescroll.js/mescroll.vue";
import TypePopup from "../../components/TypePopup";
import moment from "moment";
import { getTypeData, getTaoChangList } from "../../api/index.js";

export default {
  data() {
    return {
      list: [],
      mescroll: {},
      type: "", //选中的项目
      typeData: [], //项目列表数据
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        isBoth: false,
        textInOffset: "下拉刷新",
        textOutOffset: "松开立即刷新",
        textLoading: `<p>正在加载数据中...</p><p>最后更新: 今天${moment().format(
          "HH:mm"
        )}</p>`
      }
    };
  },
  watch: {
    type: function(data) {
      this.mescroll.triggerDownScroll();
    }
  },
  mounted() {
    // this.mescroll.triggerDownScroll();
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 下拉刷新
    async downCallback(mescroll) {
      let p = JSON.parse(localStorage.getItem("selectedProject"));
      const result = await getTaoChangList({
        sid: p.id,
        isRecommend: 0
      });
      if (result.code === 1) {
        this.list = result.data;
        this.$nextTick(() => {
          mescroll.endSuccess();
        });
      } else {
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    goDetail(data) {
      this.$router.push({ path: "/taochangDetail", query: { cid: data } });
    },
    goBack() {
      this.$router.push({ path: "/home" });
    }
  },
  components: { Header, MescrollVue, TypePopup }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    ul {
      padding: 10px;
      box-sizing: border-box;
      width: 100%;
      li {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: @white;
        margin-bottom: 10px;
        border-radius: 5px;
        .box-shadow();
        h2 {
          font-size: 18px;
          font-weight: normal;
        }
        .sub_title {
          color: @font-secondary;
          font-size: 12px;
          margin-top: 10px;
        }
        .type_box {
          width: 100%;
          b {
            display: inline-block;
            padding: 2px 6px;
            background: rgba(0, 0, 0, 0.1);
            color: @font-secondary;
            font-size: 10px;
            border-radius: 3px;
            margin: 10px 0;
            // transform: scale(0.7);
          }
        }
        .footer {
          display: inline-block;
          .mix-flex-center();
          font-size: 12px;
          color: @font-secondary;
          padding: 10px 0 0;
          .left {
            flex: 1;
            white-space: nowrap;
            .teacher {
              text-align: center;
              .mix-flex-center();
              display: inline-block;
              flex-direction: column;
              margin-right: 10px;
              img {
                width: 30px;
                height: 30px;
                border-radius: 30px;
              }
            }
          }
          .right {
            flex: 1;
            text-align: right;
            .price {
              font-size: 20px;
              color: @red;
            }
          }
        }
      }
    }
  }
}
</style>
